import { mapGetters, mapMutations, mapActions } from 'vuex'
import { playMode } from './config'
import { shuffle } from './util'

// 当组件导入这个mixin, 就相当于写到了组件中了, 组件当中同名的方法会覆盖mixin中的方法
// 因为播放歌曲后,mini播放器显示, 歌曲/歌手列表会被mini播放器挡住一部分, 我们这里动态设置scroll的滚动范围上升一些
export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playlist'
    ])
  },
  mounted() { // 当组件的DOMready的时候执行
    this.handlePlaylist(this.playlist)
  },
  activated() { // 组件切换的时候会触发这个函数(是keep-alive的吗?)
    this.handlePlaylist(this.playlist)
  },
  watch: {
    playlist(newValue) {
      this.handlePlaylist(newValue)
    }
  },
  methods: {
    handlePlaylist() {
      // 这里的函数实现不会在mixin里面实现, 这个函数需要具体组件实现. 通过参数变化决定底部的高度
      throw new Error('component must implement handlePlaylist method.')
    }
  }
}

export const playerMixin = {
  computed: {
    iconMode () {
      if (this.mode === playMode.sequence) {
        return 'iconfont icon-sequence'
      } else if (this.mode === playMode.loop) {
        return 'iconfont icon-loop'
      } else {
        return 'iconfont icon-random'
      }
    },
    ...mapGetters([
      'sequenceList',
      'currentSong',
      'playlist',
      'mode',
      'favoriteList'
    ])
  },
  methods: {
    changeMode () {
      const mode = (this.mode + 1) % 3
      this.setPlayMode(mode)
      let list = null
      if (mode === playMode.random) {
        list = shuffle(this.sequenceList)
      } else {
        list = this.sequenceList
      }
      // 我们这里改变了currentIndex和playList, 虽然当前歌曲没变, 但是还是触发currentSong的watch事件让歌曲在暂停时播放
      this.resetCurrentIndex(list)
      this.setPlayList(list)
    },
    resetCurrentIndex (list) {
      // 因为我们改变播放顺序的时候, 歌曲数组发生变化, currentSong会跟着变化, 但是我们不能让他在点击切换播放顺序的时候变
      const index = list.findIndex((item) => {
        return item.id === this.currentSong.id
      })
      this.setCurrentIndex(index)
    },
    getFavoriteIcon(song) {
      if (this.isFavorite(song)) {
        return 'icon-favorite'
      }
      return 'icon-not-favorite'
    },
    toggleFavorite(song) {
      if (this.isFavorite(song)) {
        this.deleteFavoriteList(song)
      } else {
        this.saveFavoriteList(song)
      }
    },
    isFavorite(song) { // 辅助函数
      const index = this.favoriteList.findIndex((item) => {
        return item.id === song.id
      })
      return index > -1
    },
    ...mapMutations({
      setPlayingState: 'SET_PLAYING_STATE',
      setCurrentIndex: 'SET_CURRENT_INDEX',
      setPlayMode: 'SET_PLAY_MODE',
      setPlayList: 'SET_PLAYLIST'
    }),
    ...mapActions([
      'saveFavoriteList',
      'deleteFavoriteList'
    ])
  }
}

export const searchMixin = {
  data() {
    return {
      query: '',
      refreshDelay: 106
    }
  },
  computed: {
    ...mapGetters([
      'searchHistory'
    ])
  },
  methods: {
    addQuery(query) {
      this.$refs.searchBox.setQuery(query)
    },
    blurInput() {
      this.$refs.searchBox.blur()
    },
    saveSearch() {
      this.saveSearchHistory(this.query)
    },
    onQueryChange(query) {
      // 这里我们监听 query发生变化search-box组件会派发一个query事件
      this.query = query
    },
    ...mapActions([
      'saveSearchHistory',
      'deleteSearchHistory'
    ])
  }
}